function $$(id){
    return document.getElementById(id);
}

//// 掠过顶部 nav 光亮变化                                                        顶部黑色背景测试
// $(function(){
//     var topnav = $(".top-navList>li>a");
//     topnav.hover(function(){
//         $(this).css("color","white");
//     },function(){
//         $(this).css("color","#b0b0b0");
//     });
// })

                        // canvas 画搜索放大镜
$(function(){
    var cnv = $$("magnifierLine");
    var ctx = cnv.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(5,5);
    ctx.stroke();
    ctx.closePath();

})


                        // canvas 画历史记录
$(function(){
    var cnv = $$("cnv1");
    var ctx = cnv.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(13,3);
    ctx.lineTo(13,13);
    ctx.lineTo(20,20);
    ctx.stroke();
    ctx.closePath();
})

                        // 点击触发搜索列表   掠过触发 li 颜色改变
$(function(){

    var search = document.getElementById("search-input");

    search.onfocus = function(){
        $(".search-list").css("display","block");
    }
    search.onblur = function(){
        $(".search-list").css("display","none");
    }


    var searchLi = $(".search-list>li");
    searchLi.each(function(index,element){
        $(element).mouseover(function(){
            $(element).css("background-color","#F5F5DC");
        })
        $(element).mouseout(function(){
            $(element).css("background-color","#FFFFFF");
        })
    })

})

// top 下的 body 中 轮播效果
// 图片
function tableImages(idx){
    var x = $(".table-image-list li:eq(" + idx + ")");
    x.css("display","block");
    x.siblings().css("display","none");
}
$(function(){
    var imgs = $(".table-image-list>li>a>img");
    var len = imgs.length;
    var index = 0;
    var txt = document.getElementsByClassName("text-1");
    var li = document.getElementsByClassName("li-1");
    var ts1 = $(".text-span-1");
    var ts2 = $(".text-span-2");

    // 设置定时器：点击事件
    timer = setInterval(function(){
        $(".btn-next").trigger("click");
    },4000);
    // 点击事件的反应函数
    $(".btn-next").click(function(){
        index ++;
        if(index >= len){
            index = 0;
        }
        $(txt).removeClass("a-text-big");
        $(txt).removeClass("text-color");
        $(".text-2").removeClass("text-2").addClass("text-span-1");
        $(".text-span-2").css("display","none");
        $(txt).css("height","35px");

        $(txt[index]).addClass("a-text-big");
        $(txt[index]).addClass("text-color");
        txt[index].style.height = "65px";

        $(".table-text li:eq(" + index + ")" + " .text-span-1").addClass("text-2");
        $(".table-text li:eq(" + index + ")" + " .text-span-2").css("display","inline");
        tableImages(index);
    })
    // 触摸解除点击事件
    $(".table-image-list").hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(function(){
            $(".btn-next").trigger("click");
        },4000);
    })

    // 文字轮播


    for(var i=0;i<txt.length;i++){
        txt[i].onmouseover = function(){
            index = $(this).parent().index();
            clearInterval(timer);
            tableImages(index);

            $(".text-2").removeClass("text-2").addClass("text-span-1");
            $(".text-span-2").css("display","none");
            $(txt).css("height","35px");
            this.style.height = "65px";
            $(this).addClass("a-text-big");
            $(txt).removeClass("text-color");
            $(this).addClass("text-color");

            $(".table-text li:eq(" + $(this).parent().index() + ")" + " .text-span-1").removeClass("text-span-1").addClass("text-2");
            $(".table-text li:eq(" + $(this).parent().index() + ")" + " .text-span-2").css("display","inline");
        }
        txt[i].onmouseout = function(){
            $(this).removeClass("a-text-big");
            $(this).removeClass("text-color");
            timer = setInterval(function(){
                $(".btn-next").trigger("click");
            },4000);

            // this.style.height = "35px";
            // $(".table-text li:eq(" + $(this).parent().index() + ")" + " .text-2").removeClass("text-2").addClass("text-span-1");
            // $(".table-text li:eq(" + $(this).parent().index() + ") .text-span-2").css("display","none");
        }
    }
})




/*

                        // top 下的 body 中 轮播效果
// 图片
function tableImages(idx){
    var x = $(".table-image-list li:eq(" + idx + ")");
    x.css("display","block");
    x.siblings().css("display","none");
}
$(function(){
    var imgs = $(".table-image-list>li>a>img");
    var len = imgs.length;
    var index = 0;
    var txt = document.getElementsByClassName("text-1");
    var li = document.getElementsByClassName("li-1");
    var ts1 = $(".text-span-1");
    var ts2 = $(".text-span-2");

    // 设置定时器：点击事件
    timer = setInterval(function(){
        $(".btn-next").trigger("click");
    },4000);
    // 点击事件的反应函数
    $(".btn-next").click(function(){
        index ++;
        if(index > len){
            index = 0;
        }
        $(txt).removeClass("a-text-big");
        $(txt).removeClass("text-color");
        $(".text-2").removeClass("text-2").addClass("text-span-1");
        $(".text-span-2").css("display","none");
        $(txt).css("height","35px");

        $(txt[index]).addClass("a-text-big");
        $(txt[index]).addClass("text-color");
        txt[index].style.height = "65px";

        $(".table-text li:eq(" + index + ")" + " .text-span-1").addClass("text-2");
        $(".table-text li:eq(" + index + ")" + " .text-span-2").css("display","inline");
        tableImages(index);
    })
    // 触摸解除点击事件
    $(".table-image-list").hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(function(){
            $(".btn-next").trigger("click");
        },4000);
    })

    // 文字轮播
    

    for(var i=0;i<txt.length;i++){
        clearInterval(timer);
        txt[i].onmouseover = function(){
            index = $(this).parent().index();
            tableImages(index);

            $(".text-2").removeClass("text-2").addClass("text-span-1");
            $(".text-span-2").css("display","none");
            $(txt).css("height","35px");
            this.style.height = "65px";
            $(this).addClass("a-text-big");
            $(txt).removeClass("text-color");
            $(this).addClass("text-color");

            $(".table-text li:eq(" + $(this).parent().index() + ")" + " .text-span-1").removeClass("text-span-1").addClass("text-2");
            $(".table-text li:eq(" + $(this).parent().index() + ")" + " .text-span-2").css("display","inline");
        }
        txt[i].onmouseout = function(){
            $(this).removeClass("a-text-big");
            $(this).removeClass("text-color");
            timer = setInterval(function(){
                $(".btn-next").trigger("click");
            },4000);

            // this.style.height = "35px";
            // $(".table-text li:eq(" + $(this).parent().index() + ")" + " .text-2").removeClass("text-2").addClass("text-span-1");
            // $(".table-text li:eq(" + $(this).parent().index() + ") .text-span-2").css("display","none");
        }
    }

    let cl = $(".cl-hide3-list");
    let hide3 = $(".hide3-list");
    cl.click(function (){
        hide3.css("display", "flex");
    })
})*/
